<!DOCTYPE html>
<html>
<head>
    <title>站点配置</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
</head>
<body>


<div id="rrapp" v-cloak class="container-div ui-layout-center">
    <div v-show="showList">
        <!--<span id="directory" class="switch-on"></span>-->
        <div class="grid-btn">
           <div class="layui-col-md2 " style="padding-left: 20px;">
                <input  type="text" class="form-control" v-model="q.domain" placeholder="请输入站点名称"/>
            </div>
           <div class="layui-col-md2 " style="margin:0 20px;">
                 <select style="width:150px;" class="selectpicker" id="siteSelect"  data-live-search="true">
                        <option value="">请选择账号</option>
                 </select>
            </div>
            <div class="layui-col-md2 ">
                <select style="width:150px;" class="selectpicker" id="siteSelect1"  data-live-search="true">
                    <option value="null">全部</option>
                    <option value="0">是</option>
                    <option value="1">否</option>
                </select>
            </div>
            <div class="layui-col-md2" style="margin-left: 20px;">
                <button  ref="schedule_search" class="btn btn-default" @click="query">查询</button>
            </div>
      </div>


<div class="col-sm-12 select-info table-striped">
    <table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>


<script
        src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>


<!-- <script src="${request.contextPath}/statics/js/modules/sys/user.js?_${.now?long}"></script>
-->
<script>


    $(document)
        .ready(
            function() {
                $('body').layout({
                    west__size : 185
                });
                $("#siteSelect").selectpicker({
                    noneSelectedText: '请选择',
                    countSelectedText: function(){}
                });
                vm.getBaiduAccount();
                vm.changeSelect();
                /* queryUserList();*/
                $('#bootstrap-table')
                    .bootstrapTable(
                        {
                            method : 'post', // 服务器数据的请求方式 get or post
                            contentType : "application/json",
                            url : baseURL + 'baidusite/findBaiduSitePage', // 服务器数据的加载地址
                            showRefresh : true,
                            showToggle : true,
                            showColumns : true,
                            //showExport :true,
                            sortable: true,
                            sortName:"userId",// 排序列名称
                            sortOrder: "desc",
                            iconSize : 'outline',
                            toolbar : '#exampleToolbar',
                            striped : true, // 设置为true会有隔行变色效果
                            dataType : "json", // 服务器返回的数据类型
                            pagination : true, // 设置为true会在底部显示分页条
                            // queryParamsType : "limit",
                            // //设置为limit则会发送符合RESTFull格式的参数
                            singleSelect : false, // 设置为true将禁止多选
                            // contentType : "application/x-www-form-urlencoded",
                            // //发送到服务器的数据编码类型
                            pageSize : 10, // 如果设置了分页，每页数据条数
                            pageNumber : 1, // 如果设置了分布，首页页码
                            // search : true, // 是否显示搜索框
                            //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                            sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                            // "server"
                            queryParams : function(params) {
                                //console.log(params)
                                vm.pgNum = (params.offset/params.limit) + 1;
                                vm.pgSize = params.limit;
                                return {
                                    // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                    limit : params.limit,
                                    page : (params.offset/params.limit) + 1,
                                    accountId : vm.q.accountId,
                                    domain:vm.q.domain,
                                    isPull:vm.q.isPull
                                    // sidx: params.sort,      //排序列名
                                    //order: params.order //排位命令（desc，asc）
                                    /* sort:"userId",
                                    order:"desc" */
                                };
                            },
                            // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                            // queryParamsType = 'limit' ,返回参数必须包含
                            // limit, offset, search, sort, order 否则, 需要包含:
                            // pageSize, pageNumber, searchText, sortName,
                            // sortOrder.
                            // 返回false将会终止请求
                            columns : [
                                {
                                    checkbox : true
                                },
                                {
                                    field : 'siteId',
                                    align:'center',
                                    title : 'siteId'
                                },
                                {
                                    field : 'username',
                                    align:'center',
                                    title : '账户名称'
                                },
                                {
                                    field : 'domain', // 列字段名
                                    align:'center',
                                    title : '站点',// 列标题
                                },
                                {
                                    field : 'isPull',
                                    align:'center',
                                    title : '是否拉取',
                                    formatter : function(
                                        value, row,
                                        index) {
                                        //console.log(row)
                                        var e = !row.isPull?'<input type="checkbox" siteId="'+ row.siteId +'" class="checke" checked="checked">':'<input siteId="'+ row.siteId +'" type="checkbox" class="checke">';
                                        return e;
                                    }
                                }]
                        });
            });
    var vm = new Vue({
        el : '#rrapp',
        data : {
            q : {
                accountId : '',
                domain:'',
                isPull:null
            },
            showList : true,
            pgNum:'',
            pgSize:'',
            showAccountSelect:false,
            title : null,
            roleList : {},
            user : {
                username:'',
                password:'',
                token:'',
                isPull:1
            }
        },
        methods : {
            query : function() {
                vm.reload();
            },
            getBaiduAccount:function () {
                $.get(baseURL + "baiduaccount/findAllBaiduAccount", function(r) {

                    if (r.code === 0) {
                        var str = '';
                        r.result.map(function (item) {
                            str = str + '<option class="addOption" value="'+ item.id +'">' + item.username + '</option>';
                        });
                        $("#siteSelect").append(str);
                        $('#siteSelect').selectpicker('refresh');
                    } else {
                        alert(r.msg);
                    }
                });
            },
            changeSelect:function () {
                $('#siteSelect').on('changed.bs.select',function(e){
                    // console.log($(this).val());
                    vm.q.accountId = $(this).val();
                });
                $('#siteSelect1').on('changed.bs.select',function(e){
                    // console.log($(this).val());
                    vm.q.isPull = $(this).val()=="null"?null:$(this).val();
                 });
            },
            reload : function() {
                vm.showList = true;
                // var opt = {
                //     url: baseURL + 'baidusite/findBaiduSitePage',
                //     contentType : "application/json",
                //     silent: true,
                //     query:{
                //         accountId : vm.q.accountId,
                //         domain:vm.q.domain,
                //         isPull:vm.q.isPull,
                //       }
                // };
               $('#bootstrap-table').bootstrapTable('refresh',
                   {
                     accountId : vm.q.accountId,
                     domain:vm.q.domain,
                     isPull:vm.q.isPull,
                    });
                // $('#bootstrap-table').bootstrapTable('getOptions',
                //     {
                //         limit : vm.pgSize,
                //         page : vm.pgNum
                //     });
               }

        }
    });
   $(document).on("click",".checke",function () {
       // console.log( $(this).is(":checked"))
       var params = {
           site_id:$(this).attr("siteId"),
           isPull:$(this).is(":checked")?0:1
       };
       $(this).attr("disabled",true);
       $.ajax({
           type : "POST",
           url : baseURL + "baidusite/updateSitePullStatus",
           contentType : "application/json",
           data : JSON.stringify(params),
           success : function(r) {
               if (r.code === 0) {
                   $(this).attr("disabled",false);
                   alert('操作成功', function() {
                       vm.reload();
                   });
               } else {
                   alert(r.msg);
               }
           }
       });
    });
</script>


</body>
</html>